<template>
    <div class="center_div">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;margin-top: 20px">
            <el-tab-pane label="注册审批" name="注册审批">
                <el-table :data="registerEmployee" v-loading="tableLoading" element-loading-text="Loading">
                    <el-table-column prop="employeename" label="姓名" min-width="90"></el-table-column>
                    <el-table-column prop="username" label="账号" min-width="90"></el-table-column>
                    <el-table-column prop="phone" label="电话" min-width="90"></el-table-column>
                    <el-table-column prop="email" label="邮箱" min-width="90"></el-table-column>
                    <!-- <el-table-column prop="department" label="部门" min-width="90"></el-table-column> -->
                    <el-table-column label="操作" min-width="120" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="passRegister(scope.row.employeeid)">通过</el-button>
                            <el-button type="warning" @click="delEmployee(scope.row.employeeid)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="升职审批" name="升职审批">
                <el-table :data="promotedEmployee" v-loading="tableLoading" element-loading-text="Loading">
                    <el-table-column prop="employeename" label="姓名" min-width="90"></el-table-column>
                    <el-table-column prop="username" label="账号" min-width="90"></el-table-column>
                    <el-table-column prop="phone" label="电话" min-width="90"></el-table-column>
                    <el-table-column prop="email" label="邮箱" min-width="90"></el-table-column>
                    <!-- <el-table-column prop="department" label="部门" min-width="90"></el-table-column> -->
                    <el-table-column prop="role" label="当前职位" min-width="90">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.role === 0" type="info">员工</el-tag>
                            <el-tag v-if="scope.row.role === 1" type="success">组长</el-tag>
                            <el-tag v-if="scope.row.role === 2">部长</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="晋升职位" min-width="90">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.role + 1 === 1" type="success">组长</el-tag>
                            <el-tag v-if="scope.row.role + 1 === 2">部长</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="120" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="pass(scope.row.employeeid)">通过</el-button>
                            <el-button type="warning" @click="unpass(scope.row.employeeid)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: '注册审批',
                notifyNum: 13,
                registerEmployee: [
                    {employeeid: 1, employeename: '李大二',username: 'lidae',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 0},
                    {employeeid: 2,employeename: '王小五',username: 'wangxiaowu',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 2},
                    {employeeid: 3,employeename: '位是啥',username: 'weisahsa',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 2},
                    {employeeid: 4,employeename: '啥大打',username: 'sahdada',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 1},
                    {employeeid: 5,employeename: '阿斯顿',username: 'asidun',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 0},
                    {employeeid: 6,employeename: '你很反',username: 'nihenfan',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 2},
                ],
                promotedEmployee: [
                    {employeeid: 1,employeename: '李大二',username: 'lidae',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 0},
                    {employeeid: 2,employeename: '王小五',username: 'wangxiaowu',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 2},
                    {employeeid: 3,employeename: '位是啥',username: 'weisahsa',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 2},
                    {employeeid: 4,employeename: '啥大打',username: 'sahdada',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 1},
                    {employeeid: 5,employeename: '阿斯顿',username: 'asidun',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 0},
                    {employeeid: 6,employeename: '你很反',username: 'nihenfan',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 2},
                ],
                tableLoading: false
            }
        },
        created() {
            this.fetchMeeting()
        },
        methods: {
            async fetchMeeting(){
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/admin/approval/register')
                if(code === 200) {
                    this.promotedEmployee = data.lsup
                    this.registerEmployee = data.emps
                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            handleClick(key){
                console.log(key)
            },
            pass(id) {
                console.log(id)
                this.updatePromted(1,id)
            },
            unpass(id) {
                console.log(id)
                this.updatePromted(-1,id)
            },
            passRegister(id) {
                console.log(id)
                this.updateStatus(1,id)
            },
            delEmployee(id) {
                console.log(id)
                this.cancelStatus(id)
            },
            async updateStatus(status, employeeid) {
                let {code ,data ,msg} = await this.$post('/admin/updatestatus',{
                    data: {status: status, employeeid: employeeid}
                })
                if(code === 200) {
                    this.fetchMeeting()
                    console.log(data)
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                }else {
                    this.$message.error(msg)
                }
            },
            async cancelStatus(employeeid) {
                let {code ,data ,msg} = await this.$post('/admin/updateempbyid',{
                    data: {id: employeeid}
                })
                if(code === 200) {
                    this.fetchMeeting()
                    console.log(data)
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                }else {
                    this.$message.error(msg)
                }
            },
            async updatePromted(status, employeeid) {
                let {code ,data ,msg} = await this.$post('/admin/updatepromoted',{
                    data: {status: status, employeeid: employeeid}
                })
                if(code === 200) {
                    this.fetchMeeting()
                    console.log(data)
                    this.$message({
                        message: '成功更新状态',
                        type: 'success'
                    })
                }else {
                    this.$message.error(msg)
                }
            }
        }

    }
</script>

<style>
    .center_div{
        width: 60%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>